dateMenu: Refresh world clocks section

Update the section styling to accentuate the most relevant information,
and include the timezone.

https://gitlab.gnome.org/GNOME/gnome-shell/issues/262

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index d952f1427900870db186bfaa35440e5a2555b92a..693ecb3de6c9797f4ec197555c311f32f9fbf425 100644 (file)
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -930,14 +930,28 @@ StScrollBar {
     .world-clocks-grid,
     .weather-grid {
       spacing-rows: 0.4em;
+      spacing-columns: 0.8em;
     }
 
     .weather-box {
       spacing: 0.4em;
     }
 
-    .weather-grid {
-      spacing-columns: 0.8em;
+    .world-clocks-city {
+      font-weight: bold;
+      font-size: 0.9em;
+    }
+
+    .world-clocks-time {
+      color: darken($fg_color,20%);
+      font-feature-settings: "tnum";
+      font-size: 1.2em;
+    }
+
+    .world-clocks-timezone {
+      color: darken($fg_color,40%);
+      font-feature-settings: "tnum";
+      font-size: 0.9em;
     }
 
     .weather-forecast-icon {

diff --git a/js/ui/dateMenu.js b/js/ui/dateMenu.js
index 0a6f267e7ac9051201b77486a5c2bd1972dbc928..8f961d7f367633cfbb0c5094a00adf3c1c788d18 100644 (file)
--- a/js/ui/dateMenu.js
+++ b/js/ui/dateMenu.js
@@ -156,18 +156,27 @@ var WorldClocksSection = class WorldClocksSection {
             let label = new St.Label({ style_class: 'world-clocks-city',
                                        text: name,
                                        x_align: Clutter.ActorAlign.START,
+                                       y_align: Clutter.ActorAlign.CENTER,
                                        x_expand: true });
 
-            let time = new St.Label({ style_class: 'world-clocks-time',
-                                      x_align: Clutter.ActorAlign.END,
-                                      x_expand: true });
+            let time = new St.Label({ style_class: 'world-clocks-time' });
+
+            let offset = l.get_timezone().get_offset() / 60.;
+            let fmt = (Math.trunc(offset) == offset) ? '%s%.0f' : '%s%.1f';
+            let prefix = (offset >= 0) ? '+' : '-';
+            let tz = new St.Label({ style_class: 'world-clocks-timezone',
+                                    text: fmt.format(prefix, Math.abs(offset)),
+                                    x_align: Clutter.ActorAlign.END,
+                                    y_align: Clutter.ActorAlign.CENTER });
 
             if (this._grid.text_direction == Clutter.TextDirection.RTL) {
-                layout.attach(time, 0, i + 1, 1, 1);
-                layout.attach(label, 1, i + 1, 1, 1);
+                layout.attach(tz, 0, i + 1, 1, 1);
+                layout.attach(time, 1, i + 1, 1, 1);
+                layout.attach(label, 2, i + 1, 1, 1);
             } else {
                 layout.attach(label, 0, i + 1, 1, 1);
                 layout.attach(time, 1, i + 1, 1, 1);
+                layout.attach(tz, 2, i + 1, 1, 1);
             }
 
             this._locations[i].actor = time;